<template>
      <div>
        <el-menu
          style="width: 250px; min-height: calc(100vh - 50px)"
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :default-openeds="[path]"
          router
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item-group>
              <el-row>
                <el-col :span="24">
                  <el-menu-item index="/userlist">用户账号</el-menu-item>
                  <el-menu-item index="/userinfolist">用户信息</el-menu-item>
                </el-col>
              </el-row>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>疫苗管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/typelist">分类列表</el-menu-item>
              <el-menu-item index="/vaccinumList">疫苗列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>预约管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/typelist">可预约疫苗</el-menu-item>
              <el-menu-item index="/vaccinumList">预约列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>健康中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/typelist">健康信息</el-menu-item>
              <el-menu-item index="/vaccinumList">核酸记录</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

        </el-menu>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          //path变量
          path: this.$route.path,
        };
      },
      methods: {
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
      },
    };
    </script>
